<template>
  <a-layout class="layout">
    <a-layout-header class="header" :affix="true">
      <GlobalHeader /> <!--导航栏-->
    </a-layout-header>
    <a-layout-content class="content">
      <router-view /> <!--路由-->
    </a-layout-content>
    <a-layout-footer class="footer">
      <GlobalFooter /> <!--底部-->
    </a-layout-footer>
  </a-layout>
</template>

<style>
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 让布局占满整个屏幕 */
}

.header {
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 76px; /* 明确高度 */
}

.content {
  flex: 1; /* 内容区域占据剩余的空间 */
  background-color: rgb(246, 246, 246);
  min-height: 0; /* 确保内容区的最小高度自适应 */
}

.footer {
  background: #efefef;
  padding: 16px;
  text-align: center;
}
</style>

<script>
import GlobalHeader from "@/components/GlobalHeader";
import GlobalFooter from "@/components/GlobalFooter";

export default {
  components: { GlobalHeader, GlobalFooter },
};
</script>
